<template>
  <!--
   * @name: BaseDialog 基础通用模态框
   *
   * @describe: 基于element-ui el-dialog, 封装了
   * 可拖拽、全屏显示、默认提交事件及底部footer具名插槽，响应式的模态框
   * @author: lzc
   -->
  <el-dialog
    ref="baseDialog"
    :close-on-click-modal="false"
    class="base-dialog"
    :visible.sync="visible"
    :title="title"
    :width="width"
    :fullscreen="fullscreen"
    v-el-drag-dialog="isDragDialog">
    <!--内容匿名插槽-->
    <slot></slot>
    <div v-if="footer" slot="footer" class="dialog-footer">
      <!--底部footer具名插槽-->
      <slot name="footer">
        <el-button size="small" @click="visible = false">取消</el-button>
        <el-button type="primary" :disabled="submitDisabled" :loading="submitLoading" size="small" @click="dialogSubmit">确定</el-button>
      </slot>
    </div>
  </el-dialog>
</template>

<script>
  import elDragDialog from '@/directive/el-drag-dialog'

  export default {
    name: 'BaseDialog',
    directives: { elDragDialog },
    props: {
      /** 是否可拖拽 **/
      isDragDialog: {
        type: String,
        default: "true"
      },
      /** 显示/隐藏 **/
      value: {
        type: Boolean,
        default: false,
        required: true
      },
      /** 标题 **/
      title: {
        type: String,
        default: '模态框'
      },
      /** 默认提交按钮触发事件 **/
      submit: {
        type: Function,
        default: null
      },
      /** 宽度 **/
      width: {
        type: String,
        default: '50%'
      },
      /** 是否支持全屏显示 **/
      fullscreen: {
        type: Boolean,
        default: false,
      },
      /** 是否禁用提交按钮 **/
      submitDisabled: {
        type: Boolean,
        default: false,
      },
      footer: {
        type: Boolean,
        default: true
      }
    },
    watch:{
      // 父子组件双向通信
      value(val) {
        // 监听 父组件value, 动态赋值
        this.visible = val
      },
      visible(val) {
        // 监听 visible, 使用$emit 将消息提交给父组件
        this.$emit('input', val)
      }
    },
    created() {
      this.visible = this.value
    },
    data() {
      return {
        submitLoading: false,
        visible: false,
      }
    },
    methods: {
      async dialogSubmit() {
        if (this.submit) {
          this.submitLoading = true
          try {
            await this.submit()
          }finally {
            this.submitLoading = false
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .base-dialog {
    /deep/.el-dialog{
      width:60vw;
    }
    /deep/.el-dialog__header {
      border-bottom: 1px solid #e8e8e8;
    }
  }
  @media screen and (max-width: 768px){
    .base-dialog {
      /deep/.el-dialog{
        width:96%!important;
      }
    }
  }
</style>
